<!--Start Breadcrumb-->
<div class="row">
    <div id="breadcrumb" class="col-xs-12">
        <a href="#" class="show-sidebar">
            <i class="fa fa-bars"></i>
        </a>
        <ol class="breadcrumb pull-left">
            <li><a href="index.html">首页</a></li>
            <li><a href="#">系统管理</a></li>
            <li><a href="#">角色管理</a></li>
        </ol>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="box ui-draggable ui-droppable">
                <div class="box-header">
                    <div class="box-name">
                        <i class="fa fa-coffee"></i> <span>角色管理</span>
                    </div>
                    <div class="box-icons">
                        <a class="collapse-link"> <i class="fa fa-chevron-up"></i>
                        </a> <a class="expand-link"> <i class="fa fa-expand"></i>
                    </a> <a class="close-link"> <i class="fa fa-times"></i>
                    </a>
                    </div>
                    <div class="no-move"></div>
                </div>
                <div class="box-content">
                    <button id="addrole" type="button" class="btn btn-primary">添加新角色</button>
                    <table id="grid-data" class="table table-condensed table-hover table-striped">
                        <thead>
                        <tr>
                            <th data-column-id="roleid" data-identifier="true" data-type="numeric">角色id</th>
                            <th data-column-id="role">角色名</th>
                            <th data-column-id="description">角色名</th>
                            <th data-formatter="rights" data-column-id="role_permissions">拥有权限</th>
                            <th data-formatter="commands">操作</th>
                        </tr>
                        </thead>
                    </table>


                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var grid = $("#grid-data").bootgrid({
            ajaxSettings: {
                method: "GET"
            },
            navigation: 2,
            columnSelection: false,
            ajax: true,
            url: "../roles",
            formatters: {
                "rights": function (column, row) {
                    var len = row.role_permissions.length;
                    var str = "";
                    for (var t = 0; t < len; t++)
                        str += row.role_permissions[t].permission.permission + ',';
                    str = str.substring(0, str.length - 1);
                    return str;
                },
                "commands": function (column, row) {
                    return "<button class=\"btn btn-xs btn-default ajax-link command-run1\" data-row-id=\"" + row.roleid + "\">修改</button>" +
                        "<button class=\"btn btn-xs btn-default ajax-link\" onclick=\"deleterole(" + row.roleid + ")\" data-row-id=\"" + row.roleid + "\">删除</button>";
                }
            }

        }).on("loaded.rs.jquery.bootgrid", function () {
            grid.find(".command-run1").on("click", function (e) {
                $("#updaterole").modal();
                var rid = $(this).data("row-id");
                $.get("../roles/" + rid, function (data) {
                    $("#role").val(data.role);
                    $("#desc").val(data.description);
                    var role_permission = data.role_permissions;
                    var roles = [];
                    for (var a = 0; a < role_permission.length; a++) {
                        var name = role_permission[a].permission.permission;
                        roles.push(name);
                    }
                    $.get("../allpermissions", function (a) {
                        $("#rolelist").html("");
                        for (var m = 0; m < a.length; m++) {
                            if (roles.indexOf(a[m].permission) < 0)
                                $("#rolelist").append("<div class=\"checkbox-inline\"><label><input name='permissionname[]' value=" + a[m].permissionid + " type=\"checkbox\">" + a[m].permission + "<i class=\"fa fa-square-o\"></i></label></div>");
                            else
                                $("#rolelist").append("<div class=\"checkbox-inline\"><label><input name='permissionname[]' value=" + a[m].permissionid + " type=\"checkbox\" checked=\"checked\">" + a[m].permission + "<i class=\"fa fa-square-o\"></i></label></div>");
                        }
                        roles = [];
                    });
                    $("#updatebtn").click(function () {
                        var a = $("#rolelist input[type='checkbox']").size();
                        var flag = false;
                        for (var m = 0; m < a; m++) {
                            if ($("#rolelist input[type='checkbox']").eq(m).is(':checked'))
                                flag = true;
                        }
                        if (!flag) {
                            alert("必须选择至少选择一个权限");
                            return false;
                        }

                        var checked = [];
                        $('input[name="permissionname[]"]:checked').each(function () {
                            var temp = {"permission": {"permissionid": $(this).val()}};
                            checked.push(temp);
                        });
                        var json = {
                            "roleid": rid, "role": $("#role").val(), "description": $("#desc").val(),
                            "role_permissions": checked
                        };

                        $.ajax({
                            url: "../roles/" + rid,
                            type: "PUT",
                            data: JSON.stringify(json), //转JSON字符串
                            dataType: 'json',
                            contentType: 'application/json;charset=UTF-8', //contentType很重要
                            success: function (result) {
                                alert("修改成功");
                                LoadAjaxContent("roleadmin");
                                $("#updaterole").modal('hide');
                                history.go(0);
                            }
                        });
                        checked = [];
                    });
                });

            });


        });
    });

    function deleterole(rid) {
        $.ajax({
            type: 'DELETE',
            url: "../roles/" + rid,
            success: function (data) {
                alert("删除成功！");
                LoadAjaxContent("roleadmin");
            }
        });
    }

    $(document).ready(function () {
        $("#addrole").click(function () {
            $("#roleinfo").modal();
            $.get("../allpermissions", function (a) {
                $("#roles").html("");
                for (var m = 0; m < a.length; m++) {
                    $("#roles").append("<div class=\"checkbox-inline\"><label><input name='permissionname[]' value=" + a[m].permissionid + " type=\"checkbox\">" + a[m].permission + "<i class=\"fa fa-square-o\"></i></label></div>");
                }
            });
            $("#btn").click(function () {
                if ($("#rolename").val() == "") {
                    alert("角色名不得为空");
                    return false;
                }
                var a = $("input[type='checkbox']").size();
                var flag = false;
                for (var m = 0; m < a; m++) {
                    if ($("input[type='checkbox']").eq(m).is(':checked'))
                        flag = true;
                }
                if (!flag) {
                    alert("必须选择至少选择一个权限");
                    return false;
                }

                var checked = [];
                $('input[name="permissionname[]"]:checked').each(function () {
                    var temp = {"permission": {"permissionid": $(this).val()}};
                    checked.push(temp);
                });
                var json = {
                    "role": $("#rolename").val(), "description": $("#description").val(),
                    "role_permissions": checked
                };
                $.ajax({
                    url: "../roles",
                    type: "POST",
                    data: JSON.stringify(json), //转JSON字符串
                    dataType: 'json',
                    contentType: 'application/json;charset=UTF-8', //contentType很重要
                    success: function (result) {
                        alert("添加成功");
                        LoadAjaxContent("useradmin");
                        $("#insertmodal").modal('hide');
                        history.go(0);
                        //LoadAjaxContent("useradmin.html");
                    }
                });
                checked = [];

            });

        });

    });

</script>
<div id="roleinfo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">添加角色信息</h4>
            </div>
            <form class="form-horizontal" method="post">
                <div class="modal-body">
                    <div class="row form-group">
                        <label for="rolename" class="col-sm-1 control-label">角色名</label>
                        <div class="col-sm-11">
                            <input type="text" name="rolename" class="form-control" id="rolename">
                        </div>
                    </div>
                    <div class="row form-group">
                        <label for="description" class="col-sm-1 control-label">描述</label>
                        <div class="col-sm-11">
                            <input type="text" name="description" class="form-control" id="description">
                        </div>
                    </div>
                    <h4 class="page-header">拥有权限</h4>
                    <div class="row form-group">
                        <div class="col-sm-12" id="roles">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="btn" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="updaterole" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">修改角色信息</h4>
            </div>
            <div class="modal-body">
                <div class="row form-group">
                    <label for="role" class="col-sm-1 control-label">角色名</label>
                    <div class="col-sm-11">
                        <input type="text" name="role" class="form-control" id="role">
                    </div>
                </div>
                <div class="row form-group">
                    <label for="desc" class="col-sm-1 control-label">描述</label>
                    <div class="col-sm-11">
                        <input type="text" name="desc" class="form-control" id="desc">
                    </div>
                </div>
                <h4 class="page-header">拥有权限</h4>
                <div class="row form-group">
                    <div class="col-sm-12" id="rolelist">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" id="updatebtn" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>